<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>基础用法</span>
          </div>
          <el-row>
            <el-radio v-model="radio1" label="1">备选项</el-radio>
            <el-radio v-model="radio1" label="2">备选项</el-radio>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>禁用状态</span>
          </div>
          <el-row>
            <el-radio disabled v-model="radio2" label="禁用">备选项</el-radio>
            <el-radio disabled v-model="radio2" label="选中且禁用">备选项</el-radio>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>单选框组</span>
          </div>
          <el-row>
            <el-radio-group v-model="radio3">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>按钮样式</span>
          </div>
          <el-row>
            <el-radio-group v-model="radio4" size="medium">
              <el-radio-button label="上海"></el-radio-button>
              <el-radio-button label="北京"></el-radio-button>
              <el-radio-button label="广州"></el-radio-button>
              <el-radio-button label="深圳"></el-radio-button>
            </el-radio-group>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>带有边框</span>
          </div>
          <el-row>
            <el-radio v-model="radio5" label="1" border>备选项1</el-radio>
            <el-radio v-model="radio5" label="2" border>备选项2</el-radio>
          </el-row>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "radio",
  data(){
      return {
        radio1: '1',
        radio2:'选中且禁用',
        radio3: 3,
        radio4: '上海',
        radio5:1
  }
  },
}
</script>

<style scoped lang="scss">
.clearfix{
  font-size: 14px;
}
.el-col{
  margin-bottom: 20px;
}
</style>
